<template>
  <el-dialog :visible.sync="visible" :title="title" width="600px" :close-on-click-modal="false">
    <VForm :fieldList="fieldList" label-width="90px" ref="form" v-model="formData"></VForm>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="$wait.is('account.role.*Role')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VForm from '@/components/VForm';

export default {
  components: {
    VForm,
  },
  data() {
    return {
      visible: false,
      type: 'add',
      formData: {},

      fieldList: [
        {
          type: 'input',
          label: '工位编码',
          model: 'code',
          props: {
            placeholder: '请输入工位编码',
          },
          rules: [
            {
              required: true,
              message: '请输入工位编码',
            },
          ],
        },
        {
          type: 'input',
          label: '工位名称',
          model: 'name',
          props: {
            placeholder: '请输入工位名称',
          },
          rules: [
            {
              required: true,
              message: '请输入工位名称',
            },
          ],
        },
        {
          type: 'input',
          label: 'MAC地址',
          model: 'mac_addr',
          props: {
            placeholder: '请输入MAC地址',
          },
          rules: [
            {
              required: true,
              message: '请输入MAC地址',
            },
          ],
        },
        {
          type: 'input',
          label: '备注',
          model: 'desc',
          props: {
            placeholder: '请输入备注',
          },
          rules: [
            {
              required: true,
              message: '请输入备注',
            },
          ],
        },
        {
          type: 'input',
          label: '负责人',
          model: 'user_id',
          props: {
            placeholder: '请输入负责人',
          },
          on: {
            blur: () => {
              this.formData.user_id = this.formData.user_id * 1;
            },
          },
          rules: [
            {
              required: true,
              message: '请输入负责人',
            },
          ],
        },
      ],
    };
  },

  computed: {
    title() {
      const { type } = this;
      return `${type === 'edit' ? '编辑' : '新增'}`;
    },
  },

  methods: {
    show(type = 'add', model) {
      this.visible = true;

      this.type = type;

      this.$nextTick(() => {
        this.reset();
        if (this.type === 'edit') {
          this.formData = {
            ...model,
          };
        }
      });
    },

    close() {
      this.visible = false;
    },

    reset() {
      this.formData = {};
      this.$refs.form && this.$refs.form.resetFields();
    },

    async handleSubmit() {
      const { type } = this;
      const params = await this.$refs.form.submit();
      await this.$api.ae_station[`${type}`](params);
      this.$message.success('保存成功！');
      this.close();

      this.$emit('submit');
    },
  },
};
</script>

<style lang="scss" scoped></style>
